import { CSSProperties, MouseEventHandler, useMemo } from 'react';
import styled from 'styled-components';

interface Props {
    name?: string;
    type?: 'svg' | 'png' | 'webp' | 'gif';
    src?: string;
    alt?: string;
    width?: string;
    height?: string;
    raduis?: string;
    className?: string;
    style?: CSSProperties;
    onClick?: MouseEventHandler<HTMLImageElement> | undefined;
}

const Container = styled.img<{ $width?: string, $height?: string, $raduis?: string }>`
    width: ${({ $width }) => $width};
    height: ${({ $height }) => $height};
    border-radius: ${({ $raduis }) => $raduis};
`

const ColorBox = styled.div<{ $width?: string, $height?: string, $raduis?: string }>`
    width: ${({ $width }) => $width};
    height: ${({ $height }) => $height};
    border-radius: ${({ $raduis }) => $raduis};
`


const Icon: React.FC<Props & { [key: string]: any }> = ({ type = 'png', src, width, height, className, raduis, style, name, ...others }) => {
    const icon = useMemo(() => {
        if (!name) {
            return undefined
        }
        try {
            return require(`../asserts/${name}.${type}`)
        } catch (error) {
            console.error(error)
            return undefined
        }
    }, [name, type])
    return (icon || src) ?
        <Container
            src={icon || src}
            alt={name || src}
            $width={width}
            $height={height}
            className={className}
            $raduis={raduis}
            style={style}
            {...others}
        /> :
        <ColorBox
            $width={width}
            $height={height}
            className={className}
            $raduis={raduis}
            style={style}
            {...others}
        />
}

export default Icon

